<template>
  <div>
    <!--  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/disecategory'}">疾病分类表</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/disease'}">疾病表</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-row :gutter="15">
        <el-col :model="DiseCategory" :span="10">
          <!-- <el-input v-model="input" placeholder="请输入您需要的疾病类型 如：心脏病" @input="flite(input)"> -->
          <el-input v-model="DiseCategory.dicaname" placeholder="请输入您需要的疾病类型 如：心脏病" clearable @input="flite(input)">
            <el-button slot="append" icon="el-icon-search" @click="search" />
            <!-- 当点击搜索的时候调用方法查询数据 -->
          </el-input>

          <!-- <el-button  @click="search()" icon="el-icon-search"></el-button> -->
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogFormVisible = true">
            <i class="el-icon-circle-plus-outline"></i>
            添加
          </el-button>
          <el-dialog title="添加疾病分类" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="formRules" ref="add">
              <el-form-item label="分类编码：" :label-width="formLabelWidth">
                <el-input v-model="form.dicacode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="分类名称：" :label-width="formLabelWidth">
                <el-input v-model="form.dicaname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="显示顺序号：" :label-width="formLabelWidth">
                <el-input v-model="form.sequenceno" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="疾病类型：" :label-width="formLabelWidth">
                <el-input v-model="form.dicatype" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible=false">取 消</el-button>
              <el-button type="primary" @click="add()">确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
      <!-- <el-table :data="tableData" v-for="" border style="width: 100%" > -->
      <!-- <el-table :key="item.id"  v-for="item in tableArray" v-if="item.delmark==1" border style="width: 100%" > -->
      <el-table :data="tableArray" border style="width: 100%">
        <el-table-column prop="date" label="编号" type="index" align="center"></el-table-column>
        <el-table-column prop="dicacode" label="分类编码" align="center"></el-table-column>
        <el-table-column prop="dicaname" label="分类名称"></el-table-column>
        <el-table-column prop="sequenceno" label="显示顺序号"></el-table-column>
        <el-table-column prop="dicatype" label="疾病类型" align="center"></el-table-column>
        <!-- <el-table-column prop="tableArray.delmark" label="删除标记" align="center">
        </el-table-column>-->
        <el-table-column label="操作" width="350" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="open=true;selectdisecategory(scope.row.sequenceno)">修改</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="updateDiseategory(scope.row.sequenceno)">删除</el-button>
              <el-button
              type="primary"
              icon="el-icon-loading"
              @click="toDisease(scope.row.sequenceno)"
              plain
            >详情</el-button>
          </template>

        </el-table-column>
      </el-table>
      
 
 
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"  
      :current-page="personPageInfo.pageNum"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="personPageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="personPageInfo.total">
    </el-pagination>
  </div>
    </div>
    <!-- 修改页面scope.row.id -->
    <el-dialog title="修改疾病类型" :visible.sync="open">
      <el-form v-model="form" ref="update">
        <el-form-item label="分类编码：" :label-width="formLabelWidth">
          <el-input v-model="form.dicacode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类名称：" :label-width="formLabelWidth">
          <el-input v-model="form.dicaname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序号：" :label-width="formLabelWidth">
          <el-input v-model="form.sequenceno" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="疾病类型：" :label-width="formLabelWidth">
          <el-input v-model="form.dicatype" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false;CloseForm()">取 消</el-button>

        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      DiseCategory: {
        dicaname: "",
        pageSize:5,
        pageNum:1,
      },
      // 从后台返回的数据用tale接受
      personPageInfo:{
        total:0,
        pageNum:1,
        pageSize:5,
      },
      newSize:'',
      tableArray: [],
      tableData: [],
      open: false,
      dialogFormVisible: false,
      formLabelWidth: "130px",
      form: {},
      formRules: {
        dicaname: [
          {
            required: true,
            message: "分类名称",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
              if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
                callback(new Error("请输入中文"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.gettale();
  },
  methods: {
    toDisease(sequenceno) {
      this.$router.push({
        path: "/disease",
        query: {
          sequenceno,
        },
      });
    },
       // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {

      console.log(`每页 ${newSize} 条`)
      // this.queryInfo.pagesize = newSize

      if(this.DiseCategory.dicaname == ''){
        this.personPageInfo.pageSize = newSize
        this.gettale()
      }
      else{
        this.DiseCategory.pageSize = newSize
        this.search()
      }
    
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log('++++------+++++')
      console.log(`当前页: ${newPage}`)
      // this.queryInfo.pagenum = newPage
      console.log(this.DiseCategory.dicaname)
      console.log('+++++++++++++++')
      if(this.DiseCategory.dicaname==''){
        this.personPageInfo.pageNum = newPage
         this.gettale()

      }
      else{
        this.DiseCategory.pagenum = newPage
        this.search()
      }
    },
    //重置表单
    CloseForm() {
      // console.log(this); //当前的this表示的是当前Login.vue对象自身
      this.$refs.add.resetFields();
    },
    // flite(input) {
    //   let that = this;
    //   //    filter  数组API    includes  字符串API
    //   //  和数组中的 includes类似
    //   that.tableArray = that.tableData.filter((Val) => {
    //     if (
    //       Val.dicacode.includes(that.input) ||
    //       Val.dicaname.includes(that.input)
    //       // Val.sequenceno.includes(that.input)||
    //       // Val.dicatype.includes(that.input)
    //     ) {
    //       that.tableArray.push(Val);
    //       return that.tableArray;
    //     }
    //   });
    // },
    async gettale() {
      //   const {data:res} = await this.$http.get('hissytemcontroller/selectHis')
      const { data: res } = await this.$http.post(
        "diseCategoryController/selectDiseCategoryList",this.personPageInfo
      );
      // console.log("--------------------------------")
      // console.log(res)
      // console.log("--------------------------------")
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      console.log("--------------------------------");
      this.tableArray = res.data;
      this.personPageInfo= res.personPageInfo;
      // this.personPageInfo.pageNum=res.data.pageNum;
      // this.personPageInfo.pageSize=res.data.pageSize;
      console.log("*************************");
      console.log(this.tableArray);
      console.log(this.tableData);
      console.log("--------------------------------");
      console.log(res);
    },

    /**
     * 删除 逻辑删除
     */
    updateDiseategory(sequenceno) {
      this.$confirm("此操作将执行删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.put(
            "diseCategoryController/updateDiseategory",
            {
              sequenceno
            }
          );
          if (res.meta.status !== 200) {
            return this.$message.error("删除用户失败！");
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      //刷新页面
      this.gettale();
    },

    //修改之前先查询一个对象
    async selectdisecategory(sequenceno) {
      //   const {data:res} = await this.$http.get('hissytemcontroller/selectHis')
      const { data: res } = await this.$http.post(
        "diseCategoryController/selectdisecategory",
        {
          sequenceno: sequenceno,
        }
      );
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
      this.form = res.data;
      console.log(this.form);
      console.log("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb");
      console.log(res);
    },
    async update() {
      // 修改的方法
      // 获取表单数据
      this.$refs.update.validate(async (valid) => {
        if (!valid) return;
        console.log("zzzzzzzzzzzzzzzzzzzz");
        console.log(this.form);
        console.log("*************************");
        const {
          data: res,
          // 调用后台修改的方法
        } = await this.$http.post(
          "diseCategoryController/updateByPrimaryKey",
          this.form,
          console.log("zzzzzzzzzzzzzzzzzzzz"),
          console.log(this.form),
          console.log("*************************")
        );
        if (res.meta.status !== 200) {
          return this.$message.error("修改失败！！！！" + res.meta.msg);
          console.log("zzzzzzzzzzzzzzzzzzzz");
          console.log(res);
          console.log("*************************");
        }
        this.$message.success("修改成功");
        // console.log("aaaaaaaaaaaaaaaaaaaaaaaaa")
        // console.log(res);
        // console.log("--------------------------------")
        //  添加成功，关闭页面
        this.open = false;
        //重置表单
        this.CloseFor();
        //刷新页面
        this.gettale();
      });
    },
    // 添加的方法
    async add() {
      this.$refs.add.validate(async (valid) => {
        if (!valid) return;
        console.log("zzzzzzzzzzzzzzzzzzzz");
        console.log(this.form);
        console.log("*************************");
        const { data: res } = await this.$http.post(
          "diseCategoryController/insertSelective",
          this.form
        );
        if (res.meta.status !== 200) {
          return this.$message.error("添加失败！！！！" + res.meta.msg);
          console.log("zzzzzzzzzzzzzzzzzzzz");
          console.log(res);
          console.log("*************************");
        }
        this.$message.success("添加成功");
        // console.log("aaaaaaaaaaaaaaaaaaaaaaaaa")
        // console.log(res);
        // console.log("--------------------------------")
        //  添加成功，关闭页面
        this.dialogFormVisible = false;
        //重置表单
        this.CloseFor();
        //刷新页面
        this.gettale();
      });
    },
    // 模糊查询
    async search() {
      const { data: res } = await this.$http.post(
        "diseCategoryController/selectDiseCategoryBydisecatgory",
        this.DiseCategory
      );
      console.log(res);
      console.log(res.data);
      // console.log("--------------------------------")
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg);
        console.log("--------------------------------");
        console.log("res.data");
      }
      console.log("*************************");
      console.log(this.tableArray);
      console.log("--------------------------------");
      console.log(res);
      this.tableArray = res.data;
      this.tableData = res.data;
      this.personPageInfo= res.personPageInfo;
    },
  },
};
</script>


